const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    app: path.join(__dirname, './src/main.js'),
  },
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/bundle.js'
  },
  mode: 'production', // 设置mode
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, 'src/index.html'),
      filename: 'index.html'
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({filename: "css/index.css"})
  ],
  optimization: {
    splitChunks: {
      name: "vendors",
      filename: "js/vendors.js",
      chunks: "all"
    }
  },
  module: {
    rules: [
      {test:/\.css$/, use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../'}},
          'css-loader'
        ]},
      {test:/\.scss$/,  use: [
          { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../'}},
          'css-loader', 'postcss-loader', 'sass-loader',
        ]},
      {test:/\.(png|gif|bmp|jpg)$/, use:'url-loader?limit=500&name=image/[hash:8]-[name].[ext]'},
      {test:/\.js$/, use:'babel-loader',exclude:/node-modules/}
    ]
  }
}


